<template>
  <!-- 编辑需求单 -->
  <div>
    <!--信息单 -->
    <div>
      <el-row>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item
            index="1"
            style="font-size : 20px;font : blod;color:black"
          >编辑需求单</el-menu-item>
          <span class="but">
            <el-button
              type="primary"
              icon="el-icon-document"
              @click="commit()"
            >提交</el-button>
          </span>
        </el-menu>
        <span>
          <font style="font-size : 15px;margin-left:20px">基本信息</font>
        </span>

      </el-row><br>
      <el-form
        :inline="true"
        label-position="left"
        label-width="90px"
        :model="formLabelAlign"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item label="产品线:">
              <el-input v-model="formLabelAlign.productLine" />
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1"
          >
            <el-form-item label="品类：">
              <el-input v-model="formLabelAlign.category" />
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1"
          >
            <el-form-item label="仓库：">
              <el-input v-model="formLabelAlign.warehouse" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="制单人：">
              <el-input v-model="formLabelAlign.prepared" />
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1"
          >
            <el-form-item label="审核人：">
              <el-input v-model="formLabelAlign.auditor" />
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1"
          >
            <el-form-item label="成色：">
              <el-input v-model="formLabelAlign.fineness" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="制单时间：">
              <el-input
                v-model="formLabelAlign.makingTime"
                :disabled="true"
              />
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1"
          >
            <el-form-item label="状态：">
              <el-input value="定稿" />

            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1"
          >
            <el-form-item label="单号：">
              <el-input
                v-model="formLabelAlign.orderNumber"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item
              index="1"
              style="font-size : 15px;color:black"
            >产品信息</el-menu-item>
            <span class="but">
              <el-button
                type="primary"
                icon="el-icon-folder-add"
                @click="open()"
              >添加</el-button>
            </span>
            <!-- 弹出对话框 -->
            <el-dialog
              title="产品挑选"
              :visible.sync="dialogFormVisible"
              :fullscreen="true"
            >
              <el-table
                ref="multipleTable"
                :data="gridData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >

                <el-table-column
                  type="selection"
                  width="55"
                />
                <el-table-column
                  prop="goodsCode"
                  label="产品编码"
                  width="200"
                  align="center"
                />
                <el-table-column
                  prop="goodsName"
                  label="产品名称"
                  width="200"
                  align="center"
                />
                <el-table-column
                  prop="supplier"
                  label="供应商"
                  width="200"
                  align="center"
                />
                <el-table-column
                  prop="gramEnd"
                  label="克重范围"
                  width="200"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.gramStart"
                      style="width: 50px;"
                    />
                    ~
                    <el-input
                      v-model="scope.row.gramEnd"
                      style="width: 50px;"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="weight"
                  label="重量"
                  width="150"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.weight"
                      style="width: 50px;"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="amount"
                  label="数量"
                  width="150"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.amount"
                      style="width: 50px;"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="carft"
                  label="克效果工艺"
                  width="150"
                  align="center"
                />
                <el-table-column
                  prop="specification"
                  label="规格"
                  width="150"
                  align="center"
                />

              </el-table>
              <div
                slot="footer"
                class="dialog-footer"
              >
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="confirm()"
                >确 定</el-button>
              </div>
            </el-dialog>

          </el-menu>

        </el-row>

      </el-form>
    </div>

    <div>

      <!-- 产品信息表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="goodsCode"
          label="产品编码"
          width="200"
          align="center"
        />
        <el-table-column
          prop="goodsName"
          label="产品名称"
          width="200"
          align="center"
        />
        <el-table-column
          prop="supplier"
          label="供应商"
          width="200"
          align="center"
        />
        <el-table-column
          label="克重范围"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.gramStart"
              style="width: 50px;"
            />
            ~
            <el-input
              v-model="scope.row.gramEnd"
              style="width: 50px;"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="weight"
          label="重量"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.weight"
              style="width: 50px;"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="数量"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.amount"
              style="width: 50px;"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="carft"
          label="克效果工艺"
          width="100"
          align="center"
        />
        <el-table-column
          prop="specification"
          label="规格"
          width="100"
          align="center"
        />
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click.native.prevent="deleteRow(scope.$index, tableData)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="float:right"
        :current-page="1"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="80"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      activeIndex: '',

      // 基本信息
      formLabelAlign: {},

      dialogTableVisible: false,
      dialogFormVisible: false,

      formLabelWidth: '120px',

      // 产品信息展示数据
      tableData: [],

      status: '',
      // 商品信息
      gridData: [],
      multipleSelection: [],
      //
      goodsInfo: {},
      // 需求单对象
      requisitionForm: {
        // 基本信息对象
        basicInfo: {},
        // 产品信息对象
        goodsInfo: {}
      }
    }
  },
  // 页面创建完成
  created() {
    var id = this.$route.query.id
    console.log(id)
    this.axios
      .get(this.baseUrl + 'requisitionForm/findRequisitionFormById', {
        params: {
          id: id
        }
      })
      .then((res) => {
        console.log(res.data.data.basicInfo)
        console.log(res.data.data.goodsInfo)
        this.requisitionForm = res.data.data
        this.formLabelAlign = res.data.data.basicInfo
        this.tableData = res.data.data.goodsInfo
      })
  },
  methods: {
    handleSelect() {},
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    // 添加商品弹出框
    open() {
      this.dialogFormVisible = true
      this.axios
        .get(this.baseUrl + 'goodsInfo/findAllGoodsInfo', {
          params: {
            pageNum: '0',
            pageSize: '10'
          }
        })
        .then((res) => {
          this.gridData = res.data.data
        })
    },

    // 获取选择的产品信息
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 点击确认把数据放到产品信息里面
    confirm() {
      this.dialogFormVisible = false
      // this.$data.multipleSelection.data = this.tableData;
      console.log(this.$data.multipleSelection)
      var data = this.$data.multipleSelection
      data.forEach((element) => {
        // console.log(element);
        this.tableData.push(element)
        console.log(this.tableData)
      })
    },

    // 删除当前行
    deleteRow(index, rows) {
      rows.splice(index, 1)
      var goodsinfo = this.tableData
    },

    // 提交获取参数
    commit() {
      var a = this.formLabelAlign

      // 状态码1，表示定稿
      this.formLabelAlign.status = this.status
      this.formLabelAlign.status = 1

      // console.log(this.basic.status)
      this.requisitionForm.basicInfo = this.formLabelAlign

      this.requisitionForm.goodsInfo = this.tableData
      // console.log(this.requisitionForm)
      // 发送请求，将信息添加进数据库

      this.axios({
        method: 'post',
        url: this.baseUrl + 'requisitionForm/updateOrder',
        data: this.requisitionForm
      }).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          // 提示消息
          this.$message({
            message: '需求单修改成功',
            type: 'success'
          })
          this.$router.push({ path: 'demandList' })
        } else {
          this.$message.error('需求单修改失败')
        }
      })
    }
  }
}
</script>

<style scoped>
.but {
  float: right;
}
</style>
